const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { merge } = require('webpack-merge');
const prodConfig = require('./webpack.prod.config');
const devConfig = require('./webpack.dev.config');
const commonConfig = {
  entry: './src/main.js',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use:[
            // 'style-loader',
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
              }
            },
            'postcss-loader'
        ]
      },

      {
        test: /\.less$/i,
        use:[
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          'postcss-loader',
          'less-loader',
        ]
      },

      {
        test: /\.(jpe?g|png|gif|webp)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[name]:[hash:6].[ext]',
              limit: 1024 * 100
            }
          }

        ]
      },

      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset',
        generator: {
          filename: 'static/[hash:6][ext][query]'
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024, // 100kb
          }
        }
      },

      {
        test: /\.vue$/,
        use: ['vue-loader']
      },
/*
      {
        test: /\.jsx?$/i,
        exclude: /node_modules/,
        use: ['babel-loader']
      }*/
    ],
  },
  plugins: [
      new HTMLWebpackPlugin({
        template: './public/index.html',
        title: 'Webpack' // ejs 变量注入
      }),
      new MiniCssExtractPlugin({
        filename: 'css/[name].[hash:8].css',
        chunkFilename: 'css/[name].[contenthash:8].css'
      }),
      new VueLoaderPlugin()
  ]
};

module.exports = function (env) {
  const isProduction = env.production;
  process.env.NODE_ENV = isProduction ? 'production' : 'development';
  const config = isProduction ? prodConfig : devConfig;
  const mergeConfig = merge(config, commonConfig)
  console.log(mergeConfig)
  return  mergeConfig
}

